<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>旋转</title>
  <style>
      body {
          background-color: lightgrey;
          perspective: 1000px;
      }

      .box {
          width: 200px;
          height: 200px;
          background-color: orange;
          margin: 200px auto;
          border-radius: 30px;
          transition: all .7s;
          /* 变换中心点 - 旋转, 缩放都需要*/
          transform-origin: center center;
      }

      .box:hover {
          /* deg 角度, turn 圈 */
          /*transform: rotateX(40deg) rotateY(30deg) rotateZ(90deg);*/
          /*transform: rotateX(2turn) rotateY(3turn) rotateZ(4turn);*/
          transform: rotateZ(1turn);
      }
  </style>
</head>
<body>
<div class="box"></div>
</body>
</html>